<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/portalCommon/layout.jsp">
<bsl:layout-component name="html-head">
<meta name="description" content="Windy Warm Corporation is always engaged in manufacturer of gasoline containers and has many kinds of gas can series.">

	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/viewArticle.css" type="text/css" media="all" />
	<script src="<%=request.getContextPath()%>/js/jcarousellite_1.0.1.js" type="text/javascript"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.mousewheel.js" type="text/javascript"></script>
	<script type="text/javascript">
	
	$(function(){
        var options1 = {navigation: 'hover',direction:  'left'};
        $('.ppy3').popeye(options1);
        $(".anyClass").jCarouselLite({
	        btnNext: ".next",
	        btnPrev: ".prev",
	        auto: 4000,
	        speed: 1500,
	        visible:6,
	        mouseWheel: true,
	        scroll: 1
	    });
    });
    
</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-41141994-1', 'windywarm.com');
  ga('send', 'pageview');

</script>
</bsl:layout-component>
<bsl:layout-component name="title">
Gas Cans - ${curDivision.divNameEn}
</bsl:layout-component>
<bsl:layout-component name="content" >
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>
<c:set value="gas-cans" var="urlPrefix"></c:set>
<div class="potal_title_div">
<div style="float:left;font: 12px/38px Verdana,microsoft yahei,Arial;padding-left:32px;color:#505050;">
	<a href="${contextPath}/${urlPrefix}/viewHome">Home</a> &gt; <a href="${contextPath}/${urlPrefix}/viewProducts">&nbsp;Products</a> &gt;&nbsp;${curCategory.cateNameEn }
</div>
	
</div>	
<div class="article_core">
<c:forEach items="${articles}" var="article" varStatus="vs">





<div class="entry_article" style="width:98%;margin-top: 12px;">
	<c:choose>
		<c:when test="${not empty article.album.photos}">
			<c:set value="width: 75%" var="textWidth"></c:set>
		</c:when>
		<c:otherwise>
			<c:set value="width: 100%" var="textWidth"></c:set>
		</c:otherwise>
	</c:choose>
<div class="entry_left" style="${textWidth}">
	<div class="article_header" >
			<div class="pre-cat">
			<div class="pre-cat-inner"> 
					
							<a title='${article.category.cateNameEn}' href="${contextPath}/${urlPrefix}/viewProducts?category.id=${article.category.id}">${article.category.cateNameEn}</a>
						
				</div>
				<div class="pre-cat-arrow"></div>
			</div>
	
			<h2 class="article_title">
				<a href="${contextPath}/${urlPrefix}/viewProductItem?article.id=${article.id}" rel="external" title="${article.title}">${article.title}</a>
			</h2>
			
		</div>
		<div class="clear"></div>
		
		<div class="article_brief_text" style="margin-top: 12px;">
			
			${article.articleContent.brief} <a href="${contextPath}/${urlPrefix}/viewProductItem?article.id=${article.id}">Details»</a>
			
		</div>
		<div class="clear"></div>
		
</div>
	<c:if test="${not empty article.album.photos}">
	<div class="entry_right">
		
			  <div class="ppy3" style="margin-left: 10px">
				<ul class="ppy-imglist">
					<c:forEach items="${article.album.photos}" var="photo">
						<li>
			                  <a href="${contextPath}${photo.thumbnailLarge}">
			                      <img src="${contextPath}${photo.thumbnailSmall}" alt="">
			                  </a>
			                  <c:if test="${not empty photo.description}">
			                  	<span class="ppy-extcaption">
			                      <strong>${photo.description}</strong>
			                  	</span>
			                  </c:if>
			                  
			              </li>
					</c:forEach>
			              
			      </ul>
			        <div class="ppy-outer">
			                <div style="background-image: url(&quot;${contextPath}${article.album.coverPhoto.thumbnailSmall}&quot;);" class="ppy-stage">
			                    <div class="ppy-counter">
			                        <strong class="ppy-current">1</strong> / <strong class="ppy-total">9</strong> 
			                    </div>
			               	</div>
			                <div class="ppy-nav">
			                        <a class="ppy-next" title="Next">Next</a>
			                        <a class="ppy-prev" title="Previous">Previous</a>
			                </div>
			       </div>
			       <div style="visibility: hidden; height: 0px; overflow: hidden;" class="ppy-caption">
			                <span class="ppy-text">
			                        
			                </span>
			       </div>
				</div>
		</div>
	</c:if>
	<div class="article_tails">
	
						
	</div>
</div>
</c:forEach>
	<div>
			<jsp:include page="../common/pageNum.jsp">
					<jsp:param value="${contextPath}/${urlPrefix}/viewProducts?category.id=${curCategory.id}" name="actionName"/>
					<jsp:param value="${page}" name="page"/>
		        </jsp:include>
	</div>	
 
</div>
<div class="bottom_conetent">
	<div class="potal_title_div">
				<div style="float:left;font:normal 16px/38px Verdana,microsoft yahei,Arial;padding-left:32px;color:#505050;">
					Main Products
				</div>
					<div style="float:right;width:60px;height:38px;background:url(images/title.png) -940px 0px no-repeat"><a href="${contextPath}/${urlPrefix}/viewProducts" style="display:inline;font:10px/38px Verdana,microsoft yahei,Arial;color:#505050;">More &gt;&gt;</a></div>
					
				</div>
	
	
	
		<div class="anyClass" style="float:left;">
		    <ul>
		    
		    	<c:forEach var="demo" varStatus="vs" items="${demoList}">
		
						<li>
							<a href="${contextPath}/${urlPrefix}/viewProductItem?article.id=${demo.id}"><img src="${contextPath}${demo.album.coverPhoto.thumbnailMiddle}" alt="" width="132" height="110" ></a>
						</li>
				</c:forEach>
		        
		    </ul>
		</div>
	</div>

</bsl:layout-component>

<bsl:layout-component name="side_info">

	<jsp:include page="prodCateInfo.jsp">
		<jsp:param value="${productDiv}" name="productDiv"/>
 		<jsp:param value="${curCategory}" name="curCategory"/>
   	</jsp:include>
	
		<jsp:include page="contactInfo.jsp">
		<jsp:param value="null" name="null"/>
   	</jsp:include>
	
</bsl:layout-component>


<bsl:layout-component name="footer_info">
	<a>abc</a>
</bsl:layout-component>
</bsl:layout-render>